<!DOCTYPE html>

<!--
1. css 中[]是属性选择器
2. 利用v-cloak可以解决插值表达式闪烁问题(Vue在后面加载)
3. v-text 可以实现插值表达式的效果,并且不存在闪烁问题
4. v-text 会覆盖元素中原本的内容,作为普通文本输出
5. v-html 和v-text作用相同,不过是作为html格式进行输出的
6. v-cloak 保持和元素实例的关联，直到结束编译后自动消失
-->

<html>
<head>
    <meta charset="UTF-8">
    <style>
        [v-clocak]{
            display: none;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-clocak="">{{msg}}</p>
        <h4 v-text="msg">因为有v-text,所以在这里填什么都不会被显示了</h4>
        <div v-html="msg2"></div>
    </div>
    <script>
        var v=new Vue({
            el: "#app",
            data: {
                msg: 'hello job!',
                msg2: '<h1>我是h1</h1>'
            }
        })
    </script>

</body>
</html>